@extends('layouts.base')

@section('title', '设备')
@section('admin-style')
<link rel="stylesheet" href="{{ asset('assets\element-ui\lib\theme-chalk\index.css') }}">
<!-- import Vue before Element -->
<script src="{{ asset('assets\vue\vue.js')}}"></script>

<!-- import JavaScript -->
<script src="{{ asset('assets\element-ui\lib\index.js') }}"></script>
<script src="{{ asset('assets\axios\axios.min.js') }}"></script>
@stop


@section('content')
<div class="container-fluid">
	<!-- ============================================================== -->
	<!-- Bread crumb and right sidebar toggle -->
	<!-- ============================================================== -->
	<div class="row page-titles">
	    <div class="col-md-5 align-self-center">
	        <h3 class="text-themecolor">设备--添加</h3>
	    </div>
	    <div class="col-md-7 align-self-center">
	        <ol class="breadcrumb">
	            <li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
	            <li class="breadcrumb-item">设备管理</li>
	            <li class="breadcrumb-item active">设备添加</li>
	        </ol>
	    </div>
	</div>
	<div class="row">
	    <div class="col-lg-12">
	        <div class="card">
            	<div class="card-header bg-success">
                    <h4 class="m-b-0 text-white">添加</h4>
                </div>
                <div class="card-body">
                    <el-card class="box-card"> 
                        <div class="card">
                            <el-form style="margin: 20px 110px;" :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" label-width="160px">
                                {{-- 基础信息开始 --}}
                                <div class="boder-rect bgbr-1">
                                    <span class="rec-title">基础信息</span>
                                  <el-form-item label="设备名称" prop="name">
                                    <el-input v-model="ruleForm.name" style="width: 56%;"></el-input>
                                  </el-form-item>
                                  <el-form-item v-if="!permissions.batchAdd" label="设备编号(imei)" prop="imei">
                                    <el-input v-model="ruleForm.imei" style="width: 56%;"></el-input>
                                  </el-form-item>
                                  <el-form-item v-if="permissions.batchAdd" label="设备编号(imei)" prop="imei">
                                    <el-input type="textarea" placeholder="请输入正确的设备IMEI号,以回车隔开" :autosize="{ minRows: 5}"  style="width: 56%;" v-model="ruleForm.imei"></el-input>
                                  </el-form-item>
                                  <el-form-item label="sim号" prop="sim_no">
                                    <el-input v-model="ruleForm.sim_no" style="width: 56%;"></el-input>
                                  </el-form-item>
                                  <el-form-item label="设备类型" prop="cate">
                                    <el-select v-model="ruleForm.cate" placeholder="请选择设备类型" style="width: 56%;">
                                      <el-option label="普通" value="1"></el-option>
                                      <el-option label="大屏" value="2"></el-option>
                                    </el-select>
                                  </el-form-item>
                                  <el-form-item label="主板类型" prop="mainborad_id">
                                    <el-select v-model="ruleForm.mainborad_id" placeholder="请选择主板类型" style="width: 56%;">
                                      <el-option v-for="(item, index) in mainborads" :key="index" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                  </el-form-item>
                                  <el-form-item label="到期时间" prop="expire_time">
                                      <el-date-picker
                                      v-model="ruleForm.expire_time"
                                      type="date"
                                      value-format="yyyy-MM-dd"
                                      placeholder="选择日期"
                                      :picker-options="pickerOptions0">
                                    </el-date-picker>
                                  </el-form-item>
                                  <el-form-item label="设备备注" prop="rank">
                                    <el-input :autosize="{ minRows: 5, maxRows: 20}"  style="width: 56%;" type="textarea" v-model="ruleForm.rank"></el-input>
                                  </el-form-item>
                                  {{-- <el-form-item label="地址">
                                    <div id="target"><!-- container -->
                                      <select @change="getProvince($event)" id="province"></select><!-- 省 -->
                                      <select @change="getCity($event)" id="city"></select><!-- 市 -->
                                      <select @change="getArea($event)" id="area"></select><!-- 区 -->
                                    </div>
                                  </el-form-item>
                                  <el-form-item label="详细地址" prop="address">
                                    <el-input :autosize="{ minRows: 4, maxRows: 20}"  style="width: 56%;" type="textarea" v-model="ruleForm.address"></el-input>
                                  </el-form-item>  --}}
                                </div>
                                {{-- 基础信息结束 --}}
                                {{-- 参数设置开始 --}}
                                <div class="boder-rect bgbr-1">
                                <span class="rec-title">参数配置</span>
                                    <div class="boder-rect bgbr-1">
                                    <span class="rec-title">温度</span>    
                                        <el-row>
                                            <el-col :span="6">
                                              <el-form-item
                                              label=" " 
                                              prop="temstate">
                                                <el-radio-group v-model="ruleForm.temstate">
                                                  <el-radio-button label="1">开启</el-radio-button>
                                                  <el-radio-button label="0">关闭</el-radio-button>
                                                </el-radio-group>
                                              </el-form-item> 
                                            </el-col>
                                            <el-col :span="6">
                                              <el-form-item
                                              label=" " 
                                              prop="temkey">
                                                <el-radio-group v-model="ruleForm.temkey">
                                                  <el-radio-button label="cold">制冷</el-radio-button>
                                                  <el-radio-button label="heat">制热</el-radio-button>
                                                </el-radio-group>
                                              </el-form-item>
                                            </el-col>
                                            <el-col :span="11">
                                              <el-form-item label="温度值" prop="temvalue">
                                                <el-input-number :step="1" step-strictly :min="0" :max="99" v-model="ruleForm.temvalue" style="width: 56%;"></el-input-number>
                                              </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                              <el-form-item label="定时开始时间" prop="temstart">
                                                <el-time-select
                                                    placeholder="起始时间"
                                                    v-model="ruleForm.temstart"
                                                    :picker-options="{
                                                      start: '00:00',
                                                      step: '00:05',
                                                      end: '23:59'
                                                    }">
                                                </el-time-select>
                                              </el-form-item>
                                            </el-col>
                                            <el-col :span="11">
                                              <el-form-item label="定时结束时间" prop="temend">
                                                <el-time-select
                                                    style="width: 56%;"
                                                    placeholder="结束时间"
                                                    v-model="ruleForm.temend"
                                                    :picker-options="{
                                                      start: '00:00',
                                                      step: '00:05',
                                                      end: '23:59'
                                                    }">
                                                </el-time-select>
                                              </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div class="boder-rect bgbr-1">
                                    <span class="rec-title">照明</span>
                                      <el-row>
                                        <el-col :span="6">
                                          <el-form-item
                                          label=" " 
                                          prop="ledstate">
                                            <el-radio-group v-model="ruleForm.ledstate">
                                              <el-radio-button label="1">开启</el-radio-button>
                                              <el-radio-button label="0">关闭</el-radio-button>
                                            </el-radio-group>
                                          </el-form-item>
                                        </el-col>  
                                      </el-row>
                                      <el-row>
                                            <el-col :span="8">
                                              <el-form-item label="定时开始时间" prop="ledstart">
                                                <el-time-select
                                                    placeholder="起始时间"
                                                    v-model="ruleForm.ledstart"
                                                    :picker-options="{
                                                      start: '00:00',
                                                      step: '00:05',
                                                      end: '23:59'
                                                    }">
                                                </el-time-select>
                                              </el-form-item>
                                            </el-col>
                                            <el-col :span="11">
                                              <el-form-item label="定时结束时间" prop="ledend">
                                                <el-time-select
                                                    style="width: 56%;"
                                                    placeholder="结束时间"
                                                    v-model="ruleForm.ledend"
                                                    :picker-options="{
                                                      start: '00:00',
                                                      step: '00:05',
                                                      end: '23:59'
                                                    }">
                                                </el-time-select>
                                              </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                                {{-- 参数设置结束 --}}
                                {{-- 货道设置开始 --}}
                                <div class="boder-rect bgbr-1">
                                    <span class="rec-title">货道设置</span>
                                    <el-form-item label="货道模板" prop="freight_way_demo_id" v-if="freightSource == '1'">
                                        <el-select @change="getFreightWay($event, 'freightDemo')" v-model="ruleForm.freight_way_demo_id" placeholder="请选择货道模板" style="width: 56%;">
                                          <el-option v-for="(value, key) in freightDemos" :key="key" :label="value.name" :value="value.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <div class="boder-rect bgbr-1">
                                    <span class="rec-title">所有货道</span>
                                        <el-table
                                            v-loading="loading"
                                            :data="ruleForm.freightWay"
                                            height="530"
                                            border
                                            style="width: 100%">
                                            <el-table-column
                                              prop="No"
                                              label="货道编号"
                                              width="180">
                                            </el-table-column>
                                            <el-table-column
                                              prop="capacity"
                                              label="容量">
                                              <template slot-scope="scope">
                                                <el-input-number :step="1" step-strictly :min="0" v-model="scope.row.capacity" style="width: 56%;"></el-input-number>
                                              </template>
                                            </el-table-column>
                                            <el-table-column
                                              prop="type"
                                              label="锁类型">
                                              <template slot-scope="scope">
                                                <el-select v-model="scope.row.type" style="width: 80%;">
                                                  <el-option v-for="(type, typeKey) in types" :key="typeKey" :label="type.label" :value="type.value"></el-option>
                                                </el-select>
                                              </template>
                                            </el-table-column>
                                            <el-table-column
                                              prop="state"
                                              label="是否启用">
                                              <template slot-scope="scope">
                                                <el-select v-model="scope.row.state" style="width: 80%;">
                                                  <el-option v-for="(state, stateKey) in states" :key="stateKey" :label="state.label" :value="state.value"></el-option>
                                                </el-select>
                                              </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                                {{-- 货道设置结束 --}}
                                  
                                  <el-form-item>                                    
                                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                                    <el-button type="warning" @click="goBack">取消</el-button>
                                  </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </div>
            </div>
	    </div>
	</div>
</div>
@stop

@section('admin-js')
<script type="text/javascript" src="{{ asset('/assets/distpicker/dist/distpicker.min.js') }}"></script>
<script type="text/javascript">
    Vue.prototype.$axios = axios;
    Vue.prototype.$dcopy = function($arr){
        return JSON.parse(JSON.stringify($arr));
    }

</script>

<script>
    var my_vue = new Vue({
            el: '#app',
            data: function(){
                var validateImei = (rule, value, callback) => {
                    if (value != '') {
                        axios.get("{{ route('admin.machines.checkUnique') }}", {
                            params: {
                                imei: value
                            }
                        }).then(res => {
                            let data = res.data.data;
                            if(data.data){
                                callback(new Error(data.msg + data.data));
                            }
                        });
                    } else {                      
                      callback();
                    }
                };                
                return {  
                  permissions:{
                    batchAdd: "{{ auth('admin')->user()->can('admin.machines.batchAdd') }}",
                  },
                  loading:false,
                  pickerOptions0: {
                      disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
                      }
                    }, 
                  defaultExpireTime:'',
                  ruleForm: { 
                      address:'',
                      province: '',
                      city:'',
                      area:'',
                      name: '',
                      imei: '',
                      sim_no:'',
                      mainborad_id:'',
                      expire_time:'',
                      cate:'1',
                      expire_time:'',
                      freight_way_demo_id:'',
                      machine_demo_id:'',
                      freightWay:[],
                      temstate:'0',
                      temkey:'cold',
                      temtitle:'',
                      temvalue:'5',
                      temstart:'00:00',
                      temend:'00:00',
                      ledstate:'1',
                      ledkey:'',
                      ledtitle:'',
                      ledstart:'00:00',
                      ledend:'00:00',
                    },
                   config:[],
                   rules: {
                      imei: [
                        { required: true, message: '请输入imei号', trigger: 'blur' }
                      ],
                      mainborad_id: [
                        { required: true, message: '请选择模板', trigger: 'change' },
                      ],
                      expire_time: [
                        { required: true, message: '请选择过期时间', trigger: 'blur' },
                      ],
                      cate: [
                        { required: true, message: '请选择设备分类', trigger: 'change' },
                      ],
                      freight_way_demo_id:[
                        { required: true, message: '请选择货道模板', trigger: 'change' },                      
                      ],
                      machine_demo_id:[
                        { required: true, message: '请选择设备模板', trigger: 'change' }, 
                      ]
                    },
                    mainborads: [],
                    freightDemos:[],
                    machineLists:[],
                    freightSource:'1',
                    types:[
                    {
                        label:'三线电机',
                        value:1,
                    },
                    {
                        label:'电磁锁',
                        value:2,
                    },
                    {
                        label:'二线电机',
                        value:3,
                    },
                    {
                        label:'带反馈电磁锁',
                        value:4,
                    },
                    {
                        label:'履带',
                        value:5,
                    },
                    {
                        label:'蛇形货道',
                        value:6,
                    },
                    {
                        label:'特殊',
                        value:7,
                    }
                    ],
                    states:[
                    {
                        label:'未启用',
                        value:0,
                    },
                    {
                        label:'正常',
                        value:1,
                    }
                    ]
               } ;
            },
            mounted:function(){
                this.init();
                $('#target').distpicker({
                  province:'所在省',
                  city:'所在市',
                  district:'所在区'
                });
            },
            created:function(){
                if(this.active == 1){
                    this.backActive = true;
                }
                if(this.active == 3){
                    this.nextActive = true;
                }
            },
            methods: {
                init:function(){
                    var that = this;
                    //获取主板信息
                    axios.get("{{ route('admin.mainborad.lists') }}")
                    .then(res => {
                        that.mainborads = res.data.data;
                        if(that.mainborads.length > 0){
                          that.ruleForm.mainborad_id = that.mainborads[0].id;
                        }                        
                    });
                    //获取货道模板
                    axios.get("{{ route('admin.freightWayDemo.lists') }}")
                    .then(res => {
                        that.freightDemos = res.data.data;
                    });
                    var date = new Date();
                    var year = date.getFullYear()+2;
                    var mon = date.getMonth()+1;
                    var day = date.getDate();
                    that.ruleForm.expire_time = year+'-'+mon+'-'+day;
                },
                submitForm(formName) {
                    var that = this;
                    that.$refs[formName].validate((valid) => {
                      if (valid) {
                        that.postMachine();
                      } else {
                        return false;
                      }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                getFreightWay(event, key){
                    var that = this;      
                    that.loading = true;            
                    that.ruleForm.freightWay.lenght = 0;
                    if(key == 'freightDemo'){
                        that.ruleForm.freightWay = that.freightDemos.find(function(item,index){
                            if(item.id == event){
                                return item.freight_way_demo_data;
                            }
                        }).freight_way_demo_data;
                    }else if(key == 'machineDemo'){
                        that.ruleForm.freightWay = that.machineLists.find(function(item, index){
                            if(item.id == event){
                                return item;
                            }
                        }).freight_way;
                    }
                    that.loading = false;
                },
                handleRadio(){
                    var that = this;
                    that.ruleForm.freight_way_demo_id = '';
                    that.ruleForm.machine_demo_id ='';
                    that.ruleForm.freightWay = [];
                },
                postMachine(){
                    var that = this;
                    let config = [];
                    let tem = {
                        title:'温度',
                        key: that.ruleForm.temkey,
                        value: that.ruleForm.temvalue,
                        state: that.ruleForm.temstate,
                        start: that.ruleForm.temstart,
                        end: that.ruleForm.temend,
                    };
                    let led = {
                        title:'照明',
                        key: 'led',
                        value: '',
                        state: that.ruleForm.ledstate,
                        start: that.ruleForm.ledstart,
                        end: that.ruleForm.ledend,
                    };
                    config.push(tem,led);
                    if(that.ruleForm.machine_demo_id){
                        that.ruleForm.freight_way_demo_id = that.machineLists.find(function(item, index){
                            if(item.id == that.ruleForm.machine_demo_id){
                                return item;
                            }
                        }).freight_way_demo_id;
                    }
                    var postData = {
                        name: that.ruleForm.name,
                        imei: that.ruleForm.imei,
                        sim_no: that.ruleForm.sim_no,
                        mainborad_id: that.ruleForm.mainborad_id,
                        state: 0,
                        freight_way_demo_id: that.ruleForm.freight_way_demo_id,
                        expire_time: that.ruleForm.expire_time,
                        cate:that.ruleForm.cate,
                        config: config,
                        freight_way: that.ruleForm.freightWay,
                        rank: that.ruleForm.rank,
                    };

                    axios.post("{{ route('admin.machines.store') }}",postData)
                    .then(res => {
                        let data = res.data;
                        if(data.msg == 'success'){
                            that.$message.success('添加成功');
                            location.href = '{{ route('admin.machines.index') }}';
                        }else if(data.msg == 'error'){
                            that.$message.error('添加失败');
                        }
                    }).catch(error => {
                      if (error.response) {
                        that.$message.error(JSON.stringify(error.response.data.errors.imei));
                        that.active = 1;
                      }
                    });
                },
                goBack(){
                    location.href = '{{ route('admin.machines.index') }}';
                },
                getProvince(event){
                  var that = this;
                  that.ruleForm.province = $('#province').val();
                },
                getCity(event){
                  this.ruleForm.city = $('#city').val();
                },
                getArea($event){
                  this.ruleForm.area = $('#area').val();
                }
            }
        }); 
</script>
@stop